<template>
  <!--  厂家设备管理-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <!--  配置版本管理-->
      <el-col :span="20">
        <div class="page">
    <div class="page_main" style="padding-bottom: 6vw">
      <el-row>
        <el-col :span="12">
          <div style="width: 100%;height: 50vh;margin-top: 2vw">
            <devaice-echart-columnar ref="devaiceEchartColumnar"></devaice-echart-columnar>
          </div>
          <div style="width: 100%;height: 50vh;margin-top: 2vw">
            <devaice-echart-pie ref="devaiceEchartPie1"></devaice-echart-pie>
          </div>
          <div style="width: 100%;height: 50vh;margin-top: 2vw">
            <devaice-echart-pie ref="devaiceEchartPie2"></devaice-echart-pie>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="width: 100%;height: 50vh;margin-top: 2vw">
            <devaice-echart-pie ref="devaiceEchartPie"></devaice-echart-pie>
          </div>
          <div style="width: 100%;height: 50vh;margin-top: 2vw">
            <devaice-echart-pie ref="devaiceEchartPie3"></devaice-echart-pie>
          </div>
          <div style="width: 100%;height: 50vh;margin-top: 2vw">
            <devaice-echart-pie ref="devaiceEchartPie27"></devaice-echart-pie>
          </div>
        </el-col>
      </el-row>


    </div>
    <x-loading v-show="isLoading"></x-loading>

  </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  installationType,
  deptDamagePatrol,
  statistics_damageType1,
  statistics_damageType2,
  statistics_damageType3,
  statistics_damageType27,
} from '@/services/patrol'
import XLoading from '@/components/animation/x-loading.vue'
import DevaiceEchartPie from "./devaice-echart-pie";
import DevaiceEchartColumnar from "./devaice-echart-columnar";
import OrganizationTree from '@/components/organization-tree/all'

const timer = 30 * 24 * 3600 * 1000
const Echarts = require('echarts')
export default {
  components: {XLoading, DevaiceEchartPie,DevaiceEchartColumnar,OrganizationTree},
  data() {
    return {
      list: {},
      listSqgs: {},
      isLoading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      form: {
        deptTreeId:''
      },
      formDl: {
        idList: [],
        page: 1,
        pageSize: 20,
        startCreateTime: Date.parse(new Date()) - timer,
        endCreateTime: Date.parse(new Date()),
      },
      tableList: [],
      equipList: [],//设备列表
      dataList: [],
      sqgsList: [],//授权公司
      pzwjList: {},//配置文件
    }
  },
  computed: {
    // 时间赛选
    // 时间筛选
    timerArray: {
      get() {
        return [this.formDl.startCreateTime, this.formDl.endCreateTime]
      },
      set([startTimer, endTimer]) {
        this.formDl.startCreateTime = startTimer
        this.formDl.endCreateTime = endTimer
      }
    },
    // true  监测单位显示
    isAuthority() {
      return this.$store.state.userInfo.unitType === 4
    }
  },
  filters: {},
  methods: {
    selectOrgHandel() {
      this.$forceUpdate()
      this.form.deptTreeId = this.deptTree.deptTreeId
      this.queryList()
      this.queryList1()
      this.queryList2()
      this.queryList3()
      this.queryList27()
      this.queryList0()
      this.changeDept()
    },

    changeTime() {
    },
    toDeviceRoot(id) {
      this.$router.push({
        path: '/device-root',
        query: {authDeptTreeId: id}
      })
    },
    toConfigVersion(versionName, list) {
      this.$router.push({
        path: '/s-w-j',
        query: {configId: list.id}
      })
    },
    async queryList() {
      this.isLoading = true
      let {data} = await installationType(this.form)
      // 由于在前端进行过滤，所以name不能传到后端
      this.count = data.mainCount
      let dataList = []
      let nameList = []
      data.itemList.map(x => {
        dataList.push(
          {
            value: x.mainCount,
            name: x.name
          }
        )
        nameList.push(x.name)
      })
      this.$refs.devaiceEchartPie.updateEchart(dataList,nameList,data.mainCount, '病害设施类型分布')
      this.isLoading = false
    },
    async queryList1() {
      this.isLoading = true
      let {data} = await statistics_damageType1(this.form)
      // 由于在前端进行过滤，所以name不能传到后端
      this.count = data.mainCount
      let dataList = []
      let nameList = []
      data.itemList.map(x => {
        dataList.push(
          {
            value: x.mainCount,
            name: x.name
          }
        )
        nameList.push(x.name)
      })
      this.$refs.devaiceEchartPie1.updateEchart(dataList,nameList,data.mainCount, '边坡病害类型分布及占比')
      this.isLoading = false
    },
    async queryList2() {
      this.isLoading = true
      let {data} = await statistics_damageType2(this.form)
      // 由于在前端进行过滤，所以name不能传到后端
      this.count = data.mainCount
      let dataList = []
      let nameList = []
      data.itemList.map(x => {
        dataList.push(
          {
            value: x.mainCount,
            name: x.name
          }
        )
        nameList.push(x.name)
      })
      this.$refs.devaiceEchartPie2.updateEchart(dataList,nameList,data.mainCount, '桥梁病害类型分布及占比')
      this.isLoading = false
    },
    async queryList3() {
      this.isLoading = true
      let {data} = await statistics_damageType3(this.form)
      // 由于在前端进行过滤，所以name不能传到后端
      this.count = data.mainCount
      let dataList = []
      let nameList = []
      data.itemList.map(x => {
        dataList.push(
          {
            value: x.mainCount,
            name: x.name
          }
        )
        nameList.push(x.name)
      })
      this.$refs.devaiceEchartPie3.updateEchart(dataList,nameList,data.mainCount, '隧道病害类型分布及占比')
      this.isLoading = false
    },
    async queryList27() {
      this.isLoading = true
      let {data} = await statistics_damageType27(this.form)
      // 由于在前端进行过滤，所以name不能传到后端
      this.count = data.mainCount
      let dataList = []
      let nameList = []
      data.itemList.map(x => {
        dataList.push(
          {
            value: x.mainCount,
            name: x.name
          }
        )
        nameList.push(x.name)
      })
      this.$refs.devaiceEchartPie27.updateEchart(dataList,nameList,data.mainCount, '涵洞病害类型分布及占比')
      this.isLoading = false
    },
    async queryList0() {
      this.isLoading = true
      let {data} = await deptDamagePatrol(this.form)
      // 由于在前端进行过滤，所以name不能传到后端
      let yList1 = []
      let yList2 = []
      let xList = []
      data.itemList.map(x => {
        //总数
        yList1.push(x.mainCount)
        //修复完成
        yList2.push(x.count1)
        //名字
        xList.push(x.name)
      })
      this.$refs.devaiceEchartColumnar.updateEchart(yList1,yList2,xList, '子组织下病害情况')
      this.isLoading = false
    }
  },
  mounted() {
    this.queryList0()
    this.queryList()
    this.queryList1()
    this.queryList2()
    this.queryList3()
    this.queryList27()
  }
  ,
  activated() {
  }
}
</script>
<style lang="less" scoped>
.pieCard {
  height: 100% !important;

  .el-row {
    margin-top: 1vw;
    font-size: 1vw;
  }

  .el-col {
    p {
      margin-bottom: 0.5vw;
    }
  }

  .el-col-8 {
    font-weight: 600;
    color: #7b7b7b;
  }
}

h6 {
  color: #9c9c9c;
}

/deep/ .el-progress__text {

  display: none;
}

/*设置小的滚动条样式*/
.topCard::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}

.topCard::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  background: #228AF5;
}

.topCard::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(255, 255, 255, 1);
}
</style>
